<template>
  <div class="app-container">

    <u-page title="停车设置">
      <div slot="header">
        <el-button type="primary" @click="updateData">保存</el-button>
      </div>

      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-width="150px">
        <el-tabs v-model="active">

          <el-tab-pane label="停车缴费" name="first">

            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>停车缴费</h4>
                  <span> 开启后在平台中可以调起接口进行缴费</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.parking_switch" class="panel-switch" />
                </div>
              </div>

              <div v-if="dataForm.parking_switch" style="margin-top: 20px;">

                <el-form-item label="商品编码" prop="parking_code">
                  <el-input v-model="dataForm.parking_code" placeholder="商品编码" clearable style="width: 200px" />
                </el-form-item>

              </div>
            </el-card>

          </el-tab-pane>

          <el-tab-pane label="停车规则" name="first2">
            <el-form-item label="规则说明" prop="policy">
              <u-tinymce v-model="dataForm.policy" :height="300" />
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="营销设置" name="first3">

            <el-form-item label="积分抵扣" prop="credit_switch">
              <el-switch v-model="dataForm.credit_switch" />
            </el-form-item>

            <div v-if="dataForm.credit_switch" style="margin-top: 20px;">

              <el-form-item label="积分换算比例" prop="creditSpecif">
                <el-row type="flex">
                  <el-input v-model="dataForm.creditSpecif" placeholder="积分" clearable style="width: 100px" />
                  <div style="width: 50px; text-align: center;">-</div>
                  <el-input v-model="dataForm.creditSpecifPrice" placeholder="金额" clearable style="width: 100px" />
                </el-row>
              </el-form-item>

            </div>

            <el-form-item label="优惠券抵扣" prop="coupon_switch">
              <el-switch v-model="dataForm.coupon_switch" />
            </el-form-item>

            <div v-if="dataForm.coupon_switch" style="margin-top: 20px;">

              <el-form-item label="优惠券店铺号" prop="shopId">
                <el-input v-model="dataForm.shopId" placeholder="通联优惠券店铺号" clearable style="width: 200px" />
              </el-form-item>

              <el-form-item label="优惠券收银员" prop="operUserId">
                <el-input v-model="dataForm.operUserId" placeholder="通联劵收银员" clearable style="width: 200px" />
              </el-form-item>

              <el-form-item label="限制满减劵张数" prop="limitDiscountCoupon">
                <el-radio-group v-model="dataForm.limitDiscountCoupon">
                  <el-radio-button :label="1">1张</el-radio-button>
                  <el-radio-button :label="2">2张</el-radio-button>
                </el-radio-group>
              </el-form-item>

            </div>

          </el-tab-pane>

          <el-tab-pane label="会员权益" name="second">

            <el-card shadow="never" class="panel">

              <div class="panel-body">
                <div class="panel-header">
                  <h4>会员权益</h4>
                  <span> 开启后在平台中享受会员权益</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.benefitEnabled" class="panel-switch" />
                </div>
              </div>

              <div v-if="dataForm.benefitEnabled" style="margin-top: 20px;">

                <el-form-item label="会员等级" prop="benefit">
                  <ues-level v-model="dataForm.benefit" multiple number @change="changeBenefitData" />
                </el-form-item>

                <el-form-item label="权益规则" prop="benefitPolicy">
                  <u-tinymce v-model="dataForm.benefitPolicy" :height="300" />
                </el-form-item>

              </div>
            </el-card>

          </el-tab-pane>

          <el-tab-pane label="活动设置" name="third">

            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>消费领劵</h4>
                  <span>在活动期间内满足领取的用户，每个用户ID活动每天限1次</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.couponEnabled" class="panel-switch" />
                </div>
              </div>

              <div v-if="dataForm.couponEnabled" style="margin-top: 20px;">

                <el-form-item label="领取条件" prop="couponTotalSpentAmount">
                  <el-input v-model="dataForm.couponTotalSpentAmount" placeholder="请输入" clearable style="width: 300px">
                    <template slot="prepend">累计消费金额满</template>
                    <template slot="append">元</template>
                  </el-input>
                  <span>  领取  </span>
                  <el-input v-model="dataForm.couponAmount" placeholder="请输入" clearable style="width: 180px">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>

                <el-form-item label="奖励内容" prop="couponTemplateId">
                  <ues-coupon v-model="dataForm.couponTemplateId" />
                </el-form-item>

              </div>
            </el-card>

          </el-tab-pane>

          <el-tab-pane label="团劵设置" name="fourth">

            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>商品购劵</h4>
                  <span> 开启后在平台中可以调起接口支付后进行发劵</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.goods_switch" class="panel-switch" />
                </div>
              </div>

              <div v-if="dataForm.goods_switch" style="margin-top: 20px;">

                <el-form-item label="商品编码" prop="goods_code">
                  <el-input v-model="dataForm.goods_code" placeholder="商品编码" clearable />
                </el-form-item>

                <el-form-item label="商品价格" prop="goods_price">
                  <el-input v-model="dataForm.goods_price" placeholder="商品价格" clearable />
                </el-form-item>

                <el-form-item label="推送优惠券" prop="templateId">
                  <ues-coupon v-model="dataForm.templateId" />
                </el-form-item>

              </div>
            </el-card>

          </el-tab-pane>

          <el-tab-pane label="月租车" name="fifth">

            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>月租车</h4>
                  <span> 开启后在平台中可以月租车功能</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.rental_switch" class="panel-switch" />
                </div>
              </div>

              <div v-if="dataForm.rental_switch" style="margin-top: 20px;">

                <el-form-item label="总库存" prop="rental_stock">
                  <el-input v-model="dataForm.rental_stock" placeholder="总库存" clearable />
                </el-form-item>

                <el-form-item label="商品编码" prop="rental_code">
                  <el-input v-model="dataForm.rental_code" placeholder="商品编码" clearable />
                </el-form-item>

                <el-form-item label="车位分配" prop="rental_allocation_switch">
                  <el-switch v-model="dataForm.rental_allocation_switch" />
                </el-form-item>

                <el-form-item label="启用合同" prop="rental_contract_switch">
                  <el-switch v-model="dataForm.rental_contract_switch" />
                </el-form-item>

                <el-form-item label="月租规则" prop="rental_rule">
                  <rental v-model="dataForm.rental_rule" />
                </el-form-item>

                <el-form-item label="轮播设置" prop="rental_thumbs">
                  <adv v-model="dataForm.rental_thumbs" />
                </el-form-item>

                <el-form-item label="月租背景" prop="rental_bg">
                  <u-upload v-model="dataForm.rental_bg" name="file" tips="建议尺寸:640 * 350 , 请将图片尺寸保持一致" />
                </el-form-item>

                <el-form-item label="温馨提示" prop="rental_tip">
                  <u-tinymce v-model="dataForm.rental_tip" :height="300" />
                </el-form-item>

                <el-form-item label="月租协议" prop="rental_agreement">
                  <u-tinymce v-model="dataForm.rental_agreement" :height="300" />
                </el-form-item>

              </div>
            </el-card>

          </el-tab-pane>

          <el-tab-pane label="租赁合同" name="seventh">

            <el-form-item label="契约锁回调密钥" prop="secretKey">
              <el-input v-model="dataForm.secretKey" placeholder="回调密钥" clearable />
            </el-form-item>

            <el-form-item label="合同主题" prop="subject">
              <el-input v-model="dataForm.subject" placeholder="合同主题" clearable />
            </el-form-item>

            <el-form-item label="业务分类id" prop="category">
              <el-input v-model="dataForm.category" placeholder="业务分类id" clearable />
            </el-form-item>

            <el-form-item label="签署方名称" prop="tenantName">
              <el-input v-model="dataForm.tenantName" placeholder="签署方名称" clearable />
            </el-form-item>
            <el-form-item label="签署方类型" prop="tenantType">
              <el-radio v-model="dataForm.tenantType" label="COMPANY">COMPANY(公司)</el-radio>
              <el-radio v-model="dataForm.tenantType" label="PERSONAL">PERSONAL(个人)</el-radio>
            </el-form-item>

            <el-form-item label="签署方发起人名字" prop="receiverName">
              <el-input v-model="dataForm.receiverName" placeholder="签署方发起人名字" clearable />
            </el-form-item>

            <el-form-item label="签署方发起人手机号" prop="receiverMobile">
              <el-input v-model="dataForm.receiverMobile" placeholder="签署方发起人手机号" clearable />
            </el-form-item>

            <el-form-item label="签署印章id" prop="actionSealId">
              <el-input v-model="dataForm.actionSealId" placeholder="签署印章id" clearable />
            </el-form-item>

            <el-form-item label="签署关键字" prop="stamperKeyword">
              <el-input v-model="dataForm.stamperKeyword" placeholder="签署关键字" clearable />
            </el-form-item>

            <el-form-item label="文件模版id" prop="stamperDocumentIds">
              <el-input v-model="dataForm.stamperDocumentIds" placeholder="文件模版id" clearable />
            </el-form-item>

            <el-form-item label="物业费" prop="wy">
              <el-input v-model="dataForm.wy" placeholder="物业费" clearable />
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="函云上报" name="eighth">

            <el-form-item label="收款员" prop="cashier_code">
              <el-input v-model="dataForm.cashier_code" placeholder="收款员编码" clearable style="width: 200px" />
            </el-form-item>

            <el-form-item label="收银台" prop="cashdesk_no">
              <el-input v-model="dataForm.cashdesk_no" placeholder="收银台编码" clearable style="width: 200px" />
            </el-form-item>

          </el-tab-pane>

        </el-tabs>
      </el-form>
    </u-page>

  </div>
</template>
<script>

import uesCoupon from '@/components/coupon/uesCoupon.vue'
import uesLevel from '@/components/member/uesLevel.vue'
import rental from '@/components/module/rental.vue'
import adv from '@/components/module/adv'

export default {
  components: { uesLevel, uesCoupon, rental, adv },
  data() {
    return {
      api: this.$u.api.PluginsParkingConfig,
      active: 'first',
      dataForm: {
        couponTotalSpentAmount: '0',
        policy: '',
        agreement: '',
        tenantType: 'COMPANY',
        actionAutoSign: 'true'
      },
      rules: {
      },
      telData: []
    }
  },
  created() {
    this.getLoad()
  },
  methods: {
    changeBenefitData(list) {
      this.dataForm.benefitContent = JSON.stringify(list)
    },
    // 初始化数据
    getLoad() {
      this.api.fetch().then(res => {
        this.dataForm = res.data
        const { benefitContent } = this.dataForm
        this.dataForm.benefit = JSON.parse(benefitContent)
      })
    },
    // 提交编辑数据
    updateData() {
      const self = this
      this.$confirm('确认更改停车设置', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = self.$u.deepClone(self.dataForm)
        const { couponTotalSpentAmount } = data
        data.couponTotalSpentAmount = parseFloat(self.$u.test.isEmpty(couponTotalSpentAmount) ? '0' : couponTotalSpentAmount)
        self.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            self.api.update(data).then(() => {
              self.getLoad()
              self.$u.msg('保存成功')
            })
          }
        })
      }).catch(() => {
      })
    }
  }

}
</script>

<style lang="scss" scoped>

.panel{
  margin-bottom: 20px;
  .panel-body{
    display:flex;
    justify-content:space-between;

    .panel-header{
      display: flex;
      flex-flow: column;
      color: #999;
      font-size: 12px;

      h4{
        font-size: 14px;
        color: #000;
      }
    }

    .panel-switch{
      margin-top: 20px;
    }
  }
}

</style>
